<template>
  <div class="subject-right">
    <div class="subject-right-header">
      <div class="resourceTop">
        <div class="text">
          <p class="title007">试卷管理</p>
         
        </div>
        <div class="nav-right">
          <el-button size="large" round @click="xx()" color="#d11431"
            style="color: #fff">创建试卷</el-button>
        </div>
      </div>
    </div>
    <div class="subject-right-body">
      <div class="table">
        <el-table :data="tableDatas" height="74vh" style="width: 100%" empty-text="当前没有试卷" @row-click="acs"
          :row-style="{ height: '80px' }">
          <el-table-column prop="examinationId" label="试卷编号" align="center" sortable />
          <el-table-column prop="examinationName" label="试卷名称" align="center" />
          <el-table-column prop="examinationTime" label="时间" align="center" sortable />
          <el-table-column prop="id" label="管理" align="center">
            <template #default="scope">
      <el-button type="danger" round @click="xx(scope.row.examinationId)">维护试卷</el-button>
    </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
     <!-- 分页条 -->
   <el-pagination
      v-model:current-page="pageNum" 
      v-model:page-size="pageSize" 
      :page-sizes="[5, 10 ,15, 20]"
      layout="jumper, total, sizes, prev, pager, next" background 
      :total="total" @size-change="onSizeChange"
      @current-change="onCurrentChange" 
      style="margin-top: 20px; 
      justify-content: flex-end" />
  </div>

</template>
<script setup>
import { ref, reactive,onMounted } from 'vue'
import { selectPaper } from '@/api/teacher/examinationService';
import { useUserInfoStore } from "@/store/user.js";
import { useRouter } from 'vue-router'
import { roleTypes } from 'element-plus';
import { useTokenStore01 } from '@/store/token01';
const router = useRouter();
const tokenStore = useUserInfoStore();
const tokenStore01 = useTokenStore01();

const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 定义表格数据
const tableDatas = ref([]);

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
  searchPaper()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
  searchPaper()
}

const xx=(examinationId)=>{
//console.log(examinationId);
if(examinationId!=''&& examinationId!=undefined){
//console.log(examinationId);
router.push({path:'/testpaper',query:{eid:examinationId}})
}else{
tokenStore01.removeToken01()
//console.log('tokenStore01.token01');
router.push({path:'/testpaper'})
}
}
//创建试卷
// const openDialog=()=>{
//     console.log('创建标签');
//     router.push({path:'/testpaper'})
// }
//查询试卷
const searchPaper=async()=>{
  //console.log(tokenStore.userInfo.userId);
  const data={
      Id:tokenStore.userInfo.userId,
      pageNum:pageNum.value,
      pageSize:pageSize.value
  }
  const res=await selectPaper(data);
  //console.log(res.data);
  if(res.code==200){
      if(res.data.length<=0){
          tableDatas.value=[];
      }
      tableDatas.value=res.data.items;
      total.value=res.data.total;
  }
}
onMounted(()=>{
  searchPaper()
})

</script>


<style scoped lang="scss">
@import url(@/assets/font/iconfont.css);

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

a {
text-decoration: none;
}

ul,
ol {
list-style: none;
}

.resourceTop {
width: 100%;
height: 100px;
background-color: white;
border: 1px solid #f0f0f0;
padding: 16px 60px;
}

.resourceTop .logo {
width: 60px;
height: 60px;
background-color: #ff6b0f;
border-radius: 50%;
display: inline-block;
justify-content: center;
align-items: center;
}

.resourceTop .logo img {
width: 60px;
height: 60px;
padding: 18px;
}

.resourceTop .text {
width: 120px;
height: 100%;
margin-left: 20px;
display: inline-block;
}

.resourceTop .text .title007 {
font-size: 22px;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 10px;
}

.resourceTop .text p span {
color: rgba(0, 0, 0, 0.45);
}

.resourceTop .text p a {
color: #f4523b;
}

.search {
display: flex;
float: right;
border-radius: 2px;
background-color: #fafafa;
border: 1px solid #f0f0f0;
}

.sousuo {
width: 40px;
height: 40px;
padding: 11px;
background-color: #fff;
}

.resourceTop .search input {
width: 320px;
height: 40px;
border: none;
background-color: #fff;
}

.search input:focus {
outline: none;
}

.search:hover {
border: 1px solid #FF6B0F;
}

.nav-right {
float: right;
width: 500px;
height: 100%;
padding: 14px 0;
}

.subject-right-header {
width: 100%;
}

.subject-right-body {
background-color: #eeeeee;
height: 78.5vh;
width: 99.9%;
padding: 24px 60px;
}

.table {
height: 100px;
width: 100%;
}

::v-deep .el-table tr:hover {
cursor: pointer;
}
</style>